import { useEffect, useRef, useState } from 'react'
import Icon from '@/components/Icon'
import Input from '@/components/Input'
import NavBar from '@/components/NavBar'
import styles from './index.module.scss'
import { useSelector } from 'react-redux'
// 导出客户端的websocket对象
import io from 'socket.io-client'
import { getTokenInfo } from '@/utils/storage'

export default function Chat() {
  // 获取用户的头像
  const user = useSelector((state) => state.profile.user)

  // 准备要渲染的聊天记录数据
  const [messageList, setMessageList] = useState([
    // 初始消息
    // { type: 'robot', text: '亲爱的用户您好，小智同学为您服务。' },
    // { type: 'user', text: '你好' },
  ])

  // 使用ref来保存数据，因为使用useRef得到的对象永远不会改变，改变是通过current属性进行改变
  const clientRef = useRef(null)

  useEffect(() => {
    // 创建客户端连接实例
    const client = io('http://geek.itheima.net', {
      query: {
        token: getTokenInfo().token,
      },
      transports: ['websocket'],
    })
    // 将client对象保存到clientRef
    clientRef.current = client
    // 监听客户端是否连接上服务器
    client.on('connect', () => {
      console.log('连接服务器成功')
      setMessageList((messageList) => {
        return [
          ...messageList,
          { type: 'robot', text: '亲爱的用户您好，小智同学为您服务。' },
        ]
      })
    })

    // 监听收到服务器的消息的事件
    client.on('message', (data) => {
      // console.log('>>>>收到 socket.io 消息:', data)
      setMessageList((messageList) => {
        return [...messageList, { type: 'robot', text: data.msg }]
      })
    })

    // 清除副作用:
    return () => {
      // 在组件销毁时关闭 socket.io 的连接
      client.close()
    }
  }, [])

  // 用于操作聊天列表元素的引用
  const chatListRef = useRef(null)
  // 监听messageList数据的改变，来设置chatListRef的dom滚动条的位置:内容的高度-容器的高度
  useEffect(() => {
    chatListRef.current.scrollTop =
      chatListRef.current.scrollHeight - chatListRef.current.clientHeight
  }, [messageList])

  // 发送聊天信息
  const sendMessage = (e) => {
    const message = e.target.value
    if (message.length === 0) return
    if (e.keyCode === 13) {
      // 1.发送数据到服务器
      // emit(事件类型，消息数据)
      clientRef.current.emit('message', { msg: message, timestamp: Date.now() })
      // 2.改变state的数据
      setMessageList([...messageList, { type: 'user', text: message }])
      e.target.value = ''
    }
  }

  return (
    <div className={styles.root}>
      {/* 顶部导航栏 */}
      <NavBar className="fixed-header">小智同学</NavBar>

      {/* 聊天记录列表 */}
      <div className="chat-list" ref={chatListRef}>
        {messageList.map((item, index) => {
          if (item.type === 'robot') {
            // 机器人的消息
            return (
              <div key={index} className="chat-item">
                <Icon type="iconbtn_xiaozhitongxue" />
                <div className="message">{item.text}</div>
              </div>
            )
          } else {
            // 用户的消息
            return (
              <div key={index} className="chat-item user">
                <img
                  src={
                    user.photo ||
                    'http://toutiao.itheima.net/images/user_head.jpg'
                  }
                  alt=""
                />
                <div className="message">{item.text}</div>
              </div>
            )
          }
        })}
      </div>

      {/* 底部消息输入框 */}
      <div className="input-footer">
        <Input
          onKeyUp={sendMessage}
          className="no-border"
          placeholder="请描述您的问题"
        />
        <Icon type="iconbianji" />
      </div>
    </div>
  )
}
